<html>
<head>
  <style>
    * {
      font-family: sans-serif;
      font-size: 11px;
    }

    P {
      padding-top: 0.2em;
    }

    #not_ready_alert {
      border-top: 0;
      margin: 0 0 0.5em 0;
    }

    IMG {
      vertical-align: text-bottom;
    }

    .action {
      background: transparent url(img/grad.png) repeat-x top left;
      width: 120px;
      height: 22px;

      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      -webkit-box-shadow: 2px 2px 3px #aaa;
      border-top: 1px solid rgb(103, 140, 255);
      border-left: 1px solid rgb(103, 140, 255);
      border-right: 1x solid rgb(7, 32, 174);
      border-bottom: 1x solid rgb(7, 32, 174);

      text-align: center;
      padding: 0.3em;
      margin-bottom: 0.5em;

      color: #fff;
    }

    .action:hover {
      background: transparent url(img/grad_light.png) repeat-x top left;
      cursor: pointer;
    }


    .actionmono {
      background: transparent url(img/grad_mono.png) repeat-x top left;
      width: 120px;
      height: 22px;

      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      -webkit-box-shadow: 2px 2px 3px #aaa;
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
      border-right: 1x solid #666;
      border-bottom: 1x solid #666;

      text-align: center;
      padding: 0.3em 0;
    }

    .action SPAN, .actionmono SPAN {
      font-size: 14px;
      font-weight: bold;
      color: white;
      text-decoration: none;
    }

    .box,
    .hoverbox {
      background-color: #fff;
      width: 120px;
      border: 1px solid #aaa;
      -webkit-border-radius: 3px;
      -webkit-box-shadow: 2px 2px 2px #ddd;
      padding: 0.3em;
      margin: 0.3em 0;
    }

    .hoverbox:hover {
      background-color: #eee;
      text-decoration: underline;
      cursor: pointer;
    }

    .box IMG,
    .hoverbox IMG {
      vertical-align: middle;
    }

    .box A,
    .hoverbox A {
      color: #000;
      text-decoration: none;
    }

    .box A:hover,
    .hoverbox A:hover {
      text-decoration: underline;
    }

    #update_notifications {
      width: 260px;
    }

    #update_notifications .header {
      font-size: 1.4em;
      margin: 0;
    }

    #update_notifications A.dismiss {
      color: #666;
    }

    #update_notifications A.prominent {
      color: black;
      text-decoration: none;
      font-size: 1.2em;
      line-height: 2em;
    }

    #update_notifications A.prominent:hover {
      text-decoration:underline;
    }
  </style>
  <script src="js/popup.js"></script>
</head>
<body onload="loaded()">
  <div id="standard_actions">
    <div class="actionmono" id="snip_button" onclick="toggle()">
      <span id="snip_text" >Not ready</span>
    </div>
    <p id="not_ready_alert" style="display:block">
      Waiting for page to complete loading...
    </p>

    <div class="hoverbox" onclick="showDump()">
      <a href="#"><img src="img/showdump.png" style="border: 0">Show snippets</a>
    </div>
    <div class="hoverbox" onclick="clearCopy()">
      <a href="#"><img src="img/clearsnippets.png" style="border: 0">
        Clear snippets
      </a>
    </div>
    <div class="box">
      <a href="#" onclick="about()"><img src="img/about.png" style="border: 0">
        About <b>Snippy</b></a><br />
      <a href="#" onclick="bug()"><img src="img/bug.png" style="border: 0">
        Report bug</a><br />
      <a href="#" onclick="whatsnew()">
        <img src="img/whatsnew.png" style="border: 0">
        What's new?</a>
    </div>
  </div>
  <div id="update_notifications" style="display: none">
    <p class="header">
      <img src="img/icon32.png" style="vertical-align: middle;">
      Snippy has new features for you!
    </p>
    <p style="padding-left: 32px">
      <a href="#" class="prominent" onclick="whatsnew_and_disable_update()">
        <img src="img/whatsnew.png" style="border: 0">
        What's changed?
      </a><br />
      <a href="#" class="prominent" onclick="about_and_disable_update()">
        <img src="img/about.png" style="border: 0">
        I'm a new user. What is <b>Snippy</b>?
      </a>
    </p>
    <p>
      <a href="#" class="dismiss" onclick="dismiss_update_popup()">
        Dismiss this message
      </a>
    </p>
  </div>
</body>
</html>
